<template>
  <div class="myShopCar">
    <img :src="img" alt="" />
    <!-- <el-image :src="img" lazy></el-image> -->
    <div class="right">
      <span class="titles">{{ title }}</span>
      <span class="desc">{{ desc }}</span>
      <span style="color: red; font-size: 22px">￥{{ price }}</span>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    img: {
      type: String,
      default: "",
    },
    desc: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    price: {
      type: String,
      default: "",
    },
  },
  name: "myShopCar",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({});
    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myShopCar {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  img {
    width: 100px;
    height: 100px;
  }
  .right {
    margin-left: 12px;
    flex: 1;
    height: 100px;
    line-height: 24px;
    .titles {
      font-size: 16px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .desc {
      color: #666 !important;
      font-size: 14px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>